<template>
  <div class="details-wrapper-right">
    <div class="operate-bar">
      <ul class="operate-bar-left">
        <!-- <li>
          <el-select
            v-model="openType"
            placeholder="请选择开放对象"
            clearable
            @change="refreshTableData"
          >
            <el-option
              v-for="item in openTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li> -->
        <li>
          <el-input
            class="search-input"
            v-model="keywords"
            placeholder="输入功能名称查找"
            clearable
            @keyup.enter.native="refreshTableData"
            @clear="refreshTableData"
          ></el-input>
        </li>
      </ul>
      <el-button
        type="primary"
        @click="handlePerssions"
      >新增功能</el-button>
    </div>

    <div
      class="table-box"
      ref="tabBox"
    >
      <el-table
        :data="filterTableData"
        :height="tableHeight"
      >
        <el-table-column
          type="index"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="功能名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="type"
          label="功能类型"
          width="160"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.type === 1 ? '仅功能' : '控制页面'}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop=""
          label="开放对象"
        >
        </el-table-column> -->
        <el-table-column
          prop="authorityName"
          label="功能权限值"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <span
              class="operate-btn"
              @click="modifyFn(scope.row)"
            >修改</span>
            <span
              class="operate-btn delete-btn"
              @click="deleteFn(scope.row)"
            >删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 功能弹窗 -->
    <BtnDialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :btnInfo="currentBtnInfo"
      :btnType="currentBtnType"
      v-if="dialogVisible"
    />
  </div>
</template>

<script>
import _ from 'lodash';
import BtnDialog from './BtnDialog.vue';

import { deleteAuthNode, deleteAppAuthNode } from '@/api/authority.js';

export default {
  name: 'FuncList',
  components: {
    BtnDialog
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      serviceId: '', //应用id
      platformType: '', //应用类型
      power: {}, //应用权限
      currentMenuType: '', //当前菜单类型 pc / app
      currentPcMenuId: '', //pc端选中菜单id
      currentAppMenuId: '', //app端选中菜单id
      openType: '', //开放对象
      openTypeOptions: [], //开放对象选项
      keywords: '', //关键词
      filterTableData: [], //过滤后的表格数据
      tableHeight: 300, //表格高度
      dialogTitle: '', //弹窗标题
      dialogVisible: false, // 功能弹窗状态
      currentBtnInfo: {}, //功能数据
      currentBtnType: 1 // 1新增 2编辑
    };
  },
  watch: {
    tableData(nv, ov) {
      this.handleTableData();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setTableHeight();

      // 监听窗口大小变化
      window.onresize = () => {
        this.setTableHeight();
      };
    });
  },
  methods: {
    // 设置表格高度
    setTableHeight() {
      let tabBoxHeight = this.$refs.tabBox.offsetHeight;
      this.tableHeight = tabBoxHeight;
    },
    // 创建开放对象选项
    createOpenTypeData() {
      this.openTypeOptions = [
        {
          label: '所有',
          value: 1
        },
        {
          label: '长泰',
          value: 2
        },
        {
          label: '客户',
          value: 3
        }
      ];
    },
    // 处理表格数据
    handleTableData() {
      let data = _.cloneDeep(this.tableData);
      this.filterTableData = data.filter(item => {
        return item.name.indexOf(this.keywords) !== -1;
      });
    },
    // 重新加载表格数据
    refreshTableData() {
      this.handleTableData();
    },
    // 添加功能
    handlePerssions() {
      this.currentBtnType = 1;
      this.dialogTitle = '新增功能';
      this.dialogVisible = true;
    },
    // 编辑功能
    modifyFn(item) {
      if (item.type === 1) {
        this.currentBtnInfo = item;
      } else {
        let subPage = this.$store.getters.pcPower.filter(subItem => {
          return subItem.btnId === item.id;
        });
        item.subPage = subPage[0];
        this.currentBtnInfo = item;
      }
      this.currentBtnType = 2;
      this.dialogTitle = '修改功能';
      this.dialogVisible = true;
    },
    // 删除功能
    deleteFn(item) {
      let title = `<p>确定删除功能 (<span class="sc-color-primary">${item.name}</span>) ？</p>`;
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      })
        .then(() => {
          if (this.$store.getters.menuType === 'pc') {
            this.deletePcFunc(item.id);
          } else {
            this.deleteAppFunc(item.id);
          }
        })
        .catch(() => {});
    },
    // 删除pc功能
    deletePcFunc(id) {
      deleteAuthNode({
        id
      }).then(res => {
        this.operateFn(res, 1);
      });
    },
    // 删除app功能
    deleteAppFunc(id) {
      deleteAppAuthNode({
        id
      }).then(res => {
        this.operateFn(res, 2);
      });
    },
    // 操作反馈
    operateFn(res, type) {
      this.$toast(res.message);
      if (type === 1) {
        this.$store.commit('appMenu/setPcTimestamp', new Date().getTime());
      } else {
        this.$store.commit('appMenu/setAppTimestamp', new Date().getTime());
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.details-wrapper-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 20px;

  // 表格头部搜索栏
  .operate-bar {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;

    .operate-bar-left {
      display: flex;

      li {
        margin-left: 10px;

        &:first-of-type {
          margin-left: 0;
        }

        .search-input {
          width: 300px;
        }
      }
    }
  }

  .table-box {
    position: relative;
    flex: 1;
    height: 0;
    padding-top: 0;
    overflow: hidden;

    .el-table {
      position: absolute;
      width: 100%;
      overflow: auto;

      ::v-deep .el-table__body-wrapper {
        &::-webkit-scrollbar {
          width: 10px;
          height: 10px;
          background-color: transparent;
        }
        &::-webkit-scrollbar-track {
          background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 5px;
          background-color: #c4c6cc;
        }
      }
    }

    .operate-btn {
      color: var(--color-primary);
      cursor: pointer;

      &.delete-btn {
        margin-left: 15px;
        color: #f56c6c;
      }
    }
  }
}
</style>
